<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="edit"
          >编辑</el-button
        >
      </div>
      <div>
        <span>认 真 生 活 , 热 爱 生 活 !</span>
        <el-divider content-position="right">Bsea</el-divider>
      </div>
      <div
        v-for="item in message"
        :key="item.age"
        style="display: flex; flex-wrap: nowrap; justify-content: space-between"
      >
        <div style="padding-bottom: 20px">
          <div><i :class="item.icon"></i> {{ item.id }}: {{ item.text }}</div>
        </div>
      </div>

      <v-row justify="center" data-app="true">
        <v-dialog v-model="dialog" persistent max-width="600px">
          <v-card>
            <v-card-title>
              <span class="text-h5">个人信息</span>
            </v-card-title>
            <v-card-text>
              <v-container>
                <div>
                  <el-form
                    :label-position="labelPosition"
                    label-width="60px"
                    :model="copeMessage"
                    v-for="item in copeMessage"
                    :key="item.id"
                  >
                    <el-form-item :label="item.id">
                      <el-input v-model="item.text"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </v-container>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="change">
                确定更改
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    </el-card>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "AdminPersonal",
  data: () => ({
    dialog: false,
    message: [],
  }),
  created() {
    // this.$parent.username;
    let username = this.$store.state.admin_username;
    request({
      url: "admin/getuser",
      method: "POST",
      data: { username: username },
    })
      .then((res) => {
        this.message = [
          { id: "姓名", icon: "el-icon-user-solid", text: res.data.msg.name },
          { id: "年龄", icon: "el-icon-loading", text: res.data.msg.age },
          {
            id: "手机",
            icon: "el-icon-phone-outline",
            text: res.data.msg.phone,
          },
          {
            id: "邮箱",
            icon: "el-icon-s-promotion",
            text: res.data.msg.mall,
          },
          { id: "微信", icon: "el-icon-view", text: res.data.msg.wechat },
          { id: "Q Q", icon: "el-icon-place", text: res.data.msg.qq },
        ];
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    edit() {
      this.dialog = true;
      this.copeMessage = this.message;
    },
    change() {
      this.dialog = false;
      this.message = this.copeMessage;
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>